<template>
	<page-meta>
	    <navigation-bar
	      :title="nbTitle"
	      :title-icon="titleIcon"
	      :title-icon-radius="titleIconRadius"
	      :subtitle-text="subtitleText"
	      :subtitle-color="nbFrontColor"
	      :loading="nbLoading"
	      :front-color="nbFrontColor"
	      :background-color="nbBackgroundColor"
	      :color-animation-duration="2000"
	      color-animation-timing-func="easeIn"
	    />
	  </page-meta>
	<view>
		<!-- <view class="top">
			<view class="zuo">
				<image src="../../static/jiantou.png"></image>
				<text>返回</text>
			</view>
			<text>精彩放送</text>
		</view> -->
		<view class="content">
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg1.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg2.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg3.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg4.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg5.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg3.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg4.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
			<view @click="tojCXiangQing" class="view-1">
				<image src="/static/jCimg5.png"></image>
				<view class="view-2">
					<text class="text-1">最新公告通知</text>
					<text class="text-2">休闲区部分区域停止开放公告通知...</text>
					<text class="text-3">2022/12/18 10:30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					nbTitle: '精彩放送',
					        titleIcon: '/static/logo.png',
					        titleIconRadius: '20px',
					        subtitleText: 'subtitleText',
					        nbLoading: false,
					        nbFrontColor: '#000000',
					        nbBackgroundColor: '#ffffff'
			}
		},
		methods: {
			tojCXiangQing(){
				uni.navigateTo({
					url:'/pages/jingCaiXiangQing/jingCaiXiangQing'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.top{
		display: flex;
		position: fixed;
		background-color: white;
		width: 100%;
	}
	.top>text{
		position: relative;
		left: calc((100% - 64px) / 2.5);
	}
	.zuo image{
		width: 24px;
		height: 24px;
	}
	.content{
		padding-top: 15px;
		margin-bottom: 15px;
	}
	.view-1 {
		display: flex;
		padding-left: 15px;
		background-color: white;
	}

	.view-1 image {
		width: 230px;
		height: 170px;
		border-radius: 8px;
		margin-bottom: 15px;
	}

	.view-2 {
		display: flex;
		flex-direction: column;
		position: relative;
		margin-left: 10px;
		padding: 0 5px 0 5px;
	}

	.text-1 {
		font-size: 25px;
		font-family: PingFangSC-regular;
		margin-bottom: 5px;
	}

	.text-2 {
		font-size: 20px;
		color: rgba(102, 102, 102, 1);
	}

	.text-3 {
		position: absolute;
		bottom: 15px;
		font-size: 20px;
	}
</style>
